<template>
  <div
    role="tooltip"
    aria-hidden="true"
    class="van_popover van_popper van_popper_nav van_popper_avatar"
    tabindex="0"
    style="
      transform-origin: center top;
      z-index: 2124;
      position: absolute;
      top: 0;
      left: -120px;
    "
  >
    <div class="vp_container">
      <div class="big_avatar_container_default">
        <a href="javascript:;" class="avatar has_decorate">
          <div class="_avatar">
            <img
              class="_avatar_img _avatar_face _avatar_img-radius"
              src="/static/avatar/avatar/01.webp"
            />
            <div class="_avatar_pendent_dom">
              <img
                class="_avatar_img"
                src="/static/avatar/avatar_pendent/01.webp"
              />
            </div>
            <span
              class="_avatar_icon _avatar_right_icon _avatar_size_60"
              :style="{
                backgroundImage: `url('/static/avatar/avatar_icon/vip.webp')`,
              }"
            ></span>
          </div>
        </a>
      </div>
      <p class="nickname" style="padding-top: 45px">言言_Official</p>
      <div class="levelIcon"></div>
      <div class="level_content">
        <div class="level_info">
          <span class="grade">等级 6</span
          ><span class="progress"> 30847 / -- </span>
        </div>
        <a href="javascript:;" class="level_link">
          <div class="level_bar">
            <div class="level_progress"></div>
          </div>
        </a>
        <div class="level_intro">
          <p class="level_intro_title">作为LV6 ,你可以:</p>
          <div class="level_intro_content">
            1、购买邀请码(2个/月)<br />2、发表作品点评<br />3、发射个性弹幕包括(彩色、高级、顶部)<br />4、参与社区互动(包括评论、私信、动态)
          </div>
          <a href="javascript:;" class="level_intro_link"
            >会员等级相关说明
            <i class="iconfont icon-xiangyou"></i>
          </a>
        </div>
      </div>
      <div class="coins">
        <div class="coins_container">
          <div class="info">
            <div class="add_one_icon">
              <i class="iconfont icon-icon_shipin_yingbishu"></i>
            </div>
            <a href="javascript:;" title="硬币" class="jump">
              <div class="coins_icon">
                <i class="iconfont icon-icon_shipin_yingbishu"></i>
              </div>
              <span class="money">372.4</span>
            </a>
            <span class="login_award">登录奖励</span>
            <a href="javascript:;" title="B币">
              <div class="coins_icon">
                <i class="iconfont icon-icon_dingdao_Bbi"></i>
              </div>
              <span class="money">0</span>
            </a>
          </div>
          <div class="contact">
            <a href="javascript:;" class="email">
              <i
                class="
                  iconfont
                  icon-bangdingyouxiang
                  email_icon email_icon_bind
                "
              ></i>
              <span class="contact_tips email_tips">已绑定</span>
            </a>
            <a href="javascript:;" class="phone">
              <i
                class="
                  iconfont
                  icon-bangdingshoujihao
                  phone_icon phone_icon_bind
                "
              ></i>
              <span class="contact_tips phone_tips">已绑定</span>
            </a>
          </div>
        </div>
      </div>
      <div class="counts">
        <a href="javascript:;" class="count_item">
          <div class="item_key">关注</div>
          <div class="item_value">
            <span class="item_num">477</span>
            <span class="item_unit"></span>
          </div>
        </a>
        <a href="javascript:;" class="count_item">
          <div class="item_key">粉丝</div>
          <div class="item_value">
            <span class="item_num">388</span>
            <span class="item_unit"></span>
          </div>
        </a>
        <a href="javascript:;" class="count_item">
          <div class="item_key">动态</div>
          <div class="item_value">
            <span class="item_num">23</span>
            <span class="item_unit"></span>
          </div>
        </a>
      </div>
      <div class="links">
        <a href="javascript:;" class="link_item">
          <div class="link_title">
            <i class="link_icon iconfont icon-gerenzhongxin"></i>
            个人中心
          </div>
        </a>
        <a href="javascript:;" class="link_item">
          <div class="link_title">
            <i class="link_icon iconfont icon-icon_dingdao_tougaoguanli"></i>
            投稿管理
          </div>
        </a>
        <a href="javascript:;" class="link_item"
          ><div class="link_title">
            <i class="link_icon iconfont icon-qianbao-"></i>
            B币钱包
          </div>
        </a>
        <a href="javascript:;" class="link_item">
          <div class="link_title">
            <i class="link_icon iconfont icon-dingdanzhongxin"></i>
            订单中心
          </div>
        </a>
        <a href="javascript:;" class="link_item"
          ><div class="link_title">
            <i class="link_icon iconfont icon-icon_dingdao_zhibozhongxin"></i>
            直播中心
          </div>
        </a>
        <a href="javascript:;" class="link_item"
          ><div class="link_title">
            <i class="link_icon iconfont icon-wodekecheng"></i>
            我的课程
          </div>
        </a>
      </div>
      <div class="logout">
        <span>
          <i class="link_icon iconfont icon-tuichu"></i>
          退出
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.van_popover.van_popper.van_popper_avatar {
  border: none;
  top: 50px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
  width: 280px !important;
  padding: 0px;
}
.van_popper_avatar {
  .vp_container {
    min-height: 492px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    .big_avatar_container_default {
      box-sizing: border-box;
      .avatar {
        cursor: pointer;
        position: absolute;
      }
      .has_decorate {
        border-radius: 50%;
        top: -24px;
        left: 114px;
      }
    }
  }
  .nickname {
    color: #212121;
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    padding-top: 45px;
  }
  .level_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 0 20px;
    .level_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin: 20px 0 5px 0;
      .grade {
        font-size: 14px;
        color: #212121;
      }
      .progress {
        font-size: 12px;
        color: #999;
      }
    }
    .level_link {
      height: 10px;
      width: 240px;
      .level_bar {
        width: 240px;
        height: 2px;
        background-color: #f4f4f4;
        position: relative;
        margin: 4px 0;
        .level_progress {
          position: absolute;
          background-color: #f3cb85;
          border-radius: 2px;
          width: 80%;
          height: 2px;
          top: 0;
          left: 0;
        }
      }
    }
    .level_intro {
      position: absolute;
      visibility: hidden;
      opacity: 0;
      padding: 15px;
      left: 279px;
      background-color: #fff;
      width: 240px;
      font-size: 14px;
      color: #212121;
      border-radius: 2px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      cursor: text;
      user-select: text;
      .level_intro_title {
        margin-bottom: 12px;
      }
      .level_intro_content {
        margin-bottom: 14px;
      }
      .level_intro_link {
        color: #00a1d6;
        cursor: pointer;
      }
    }
    &:hover .level_intro {
      opacity: 1;
      visibility: visible;
    }
  }
  .coins {
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    padding: 14px 20px;
    color: #212121;
    .coins_container {
      display: flex;
      justify-content: space-between;
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .add_one_icon {
          width: 15px;
          height: 15px;
          left: 3px;
          opacity: 0;
          position: absolute;
        }
        .money {
          margin: 0 20px 0 8px;
        }
        .login_award {
          color: #2cc06f;
          position: absolute;
          transition: all 0.3s;
          font-size: 12px;
          opacity: 0;
          top: -12px;
          background-color: #fff;
          padding: 4px 5px;
          width: 82px;
          z-index: -1;
        }
        a {
          display: flex;
          align-items: center;
        }
      }
      .contact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .email,
        .phone {
          position: relative;
          width: 23px;
        }
        .email {
          margin: 0 8px 0 0;
          &:hover .email_tips {
            display: block;
          }
        }
        .phone {
          &:hover .phone_tips {
            display: block;
          }
        }
        .email_icon {
          color: #c0c0c0;
          font-size: 26px;
        }
        .phone_icon {
          color: #c0c0c0;
          font-size: 26px;
        }
        .email_icon_bind,
        .phone_icon_bind {
          color: #00a1d6;
        }
        .contact_tips {
          font-size: 12px;
          padding: 0 6px;
          height: 20px;
          line-height: 20px;
          border: 1px solid #ccc;
          border-radius: 4px;
          position: absolute;
          white-space: nowrap;
          background-color: #fff;
          color: #222;
          z-index: 10;
        }
        .email_tips {
          display: none;
          right: 33px;
          top: 0px;
        }
        .phone_tips {
          display: none;
          left: 28px;
          top: 0;
        }
      }
    }
    .coins_icon {
      width: 20px;
      height: 20px;
      .icon-icon_shipin_yingbishu {
        color: #00a1d6;
        font-size: 24px;
      }
      .icon-icon_dingdao_Bbi {
        color: #eecc6e;
        font-size: 20px;
      }
    }
  }
  .counts {
    height: 58px;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .count_item {
      text-align: center;
      flex: 1;
      &:hover .item_value {
        color: #00a1d6;
      }
      .item_key {
        font-size: 12px;
        color: #999;
      }
      .item_value {
        font-size: 16px;
        color: #212121;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        height: 20px;
        .item_unit {
          font-size: 14px;
        }
      }
    }
  }
  .links {
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    padding: 7px 0;
    .link_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 23px;
      transition: all 0.3s ease;
      cursor: pointer;
      &:hover {
        background-color: #f4f4f4;
      }
      .link_title {
        font-size: 14px;
        color: #212121;
        display: flex;
        align-items: center;
      }
    }
  }
  .logout {
    width: 100%;
    font-size: 14px;
    color: #212121;
    display: flex;
    align-items: center;
    padding: 7px 0;
    cursor: pointer;
    span {
      width: 100%;
      padding: 8px 23px;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
      &:hover {
        color: #212121;
        background-color: #f4f4f4;
      }
    }
  }
  .link_icon {
    font-size: 24px;
    vertical-align: middle;
    color: #979797;
    margin-right: 5px;
  }
}
._avatar {
  display: block;
  position: relative;
  background-size: cover;
  border-radius: 50%;
  width: 51px;
  height: 51px;
  ._avatar_img {
    border: none;
    display: block;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast; //图片处理方式
  }
  ._avatar_face {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
  }
  ._avatar_img-radius {
    border-radius: 50%;
  }
}
._avatar_pendent_dom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 90px;
  width: 90px;
  overflow: hidden;
  ._avatar_img {
    height: 100%;
    min-width: 100%;
    user-select: none;
    border: none;
    display: block;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast; //图片处理方式
  }
}
._avatar_right_icon {
  position: absolute;
  bottom: -1px;
  right: 0;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast; //图片处理方式
}
._avatar_size_60 {
  width: 18px;
  height: 18px;
  bottom: -1px;
}
</style>